<template>
  <el-tooltip :visible="tipsVisible">
    <template #content>
      <span>{{ props.content }}</span>
    </template>
    <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <slot></slot>
    </div>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";

const props = defineProps({
  content: {
    type: String,
    default: "",
  },
});
const tipsVisible = ref(false);

const handleMouseEnter = () => {
  tipsVisible.value = true;
};

const handleMouseLeave = () => {
  tipsVisible.value = false;
};
</script>

<style lang="scss" scoped></style>
